<!--  监测点位管理 -->

<template>
  <div class="flex flex-col w-full p-10px box-border" style="height: calc(100% - 40px)">
    <!-- card -->
    <div
      class="flex-1 flex flex-col h-100%"
      style="box-shadow: 0px 1px 10px 0px rgba(153, 153, 153, 0.4)"
    >
      <div class="h-50px lh-50px pl-10px pr-40px bg-[#F8F8F8]">
        <span class="text-[#333] text-16px font-bold"> 监测点位管理</span>
      </div>

      <!-- tab -->
      <div class="flex items-center h-60px pl-10px bg-[#f8f8f8]">
        <div
          v-for="(item, index) in topNav"
          :key="index"
          class="w-150px h-36px lh-36px mr-10px text-center text-[#333] bg-[#dceeff] rounded-18px cursor-pointer"
          :class="{ 'tab-active': tabActiveIndex === index }"
          @click="tabClick(item, index)"
        >
          {{ item.text }}
        </div>
      </div>

      <div class="w-full" style="height: calc(100% - 110px)">
        <!--查询表单 -->
        <el-form
          :inline="true"
          class="m-20px pl-30px border-0 border-b border-solid border-#E0E0E0"
        >
          <el-form-item label="监测点位名称">
            <el-input v-model="jcdwMc" placeholder="请输入监测点位名称" />
          </el-form-item>
          <el-form-item label="监测点位编号">
            <el-input v-model="jcdwBh" placeholder="请输入监测点位编号" />
          </el-form-item>
          <el-form-item label="所属企业部门">
            <el-input v-model="ssqyMc" placeholder="请输入所属企业部门" />
          </el-form-item>
          <el-form-item label="管理单位">
            <el-input v-model="gldwMc" placeholder="请输入管理单位" />
          </el-form-item>

          <div class="mt-2px float-right">
            <el-button
              type="primary"
              class="w-80px rounded-15px"
              :icon="Search"
              @click="loadTableData"
              >查询</el-button
            >
            <el-button class="w-80px bg-[#dceeff] rounded-15px" :icon="Refresh" @click="resetSearch"
              >重置</el-button
            >
          </div>
        </el-form>

        <!--表格 -->
        <div class="text-right mr-20px mb-10px">
          <el-button type="primary" class="w-80px rounded-15px" :icon="Plus" @click="openDialog"
            >新增</el-button
          >
          <el-button
            type="primary"
            class="w-80px rounded-15px"
            :icon="Download"
            @click="exportExcel"
            >导出</el-button
          >
        </div>
        <Table
          class="mt-20px"
          style="height: calc(100% - 200px)"
          :table-columns="tableColumns"
          :table-data="tableData"
        >
          <template #jclxColumn="{ row }">
            <span>{{ formatJclx(row.jclx) }}</span>
          </template>

          <template #jwdColumn="{ row }">
            <span>{{ formatJwd(row.ssqyJd, row.ssqyWd) }}</span>
          </template>

          <template #actionColumn="{ row }">
            <div class="flex justify-center">
              <el-button link type="primary" @click="queryDialog(row)">查看</el-button>
              <el-button link type="danger" @click="deleteData">删除</el-button>
            </div>
          </template>
        </Table>

        <el-pagination
          class="justify-end m-10px mt-15px"
          layout="total, sizes, prev, pager, next"
          :total="tableTotal"
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>

  <Dialog :visible="dialogShow" title="监测点位新增" width="1000px" @close="dialogShow = false">
    <el-form
      v-for="(formItem, formIndex) in dialogFormList"
      :key="formIndex"
      :label-width="formItem.formLabelWidth"
    >
      <el-row :gutter="0">
        <el-col v-for="(item, index) in formItem.formList" :key="index" :span="item.span || 12">
          <el-form-item :label="item.label">
            <el-input
              v-if="item.type === 'input'"
              v-model="item.value"
              :type="item.type"
              :disabled="inputDisabled"
            ></el-input>
            <el-select
              v-else-if="item.prop === 'jclx'"
              v-model="item.value"
              style="width: 100%"
              :disabled="inputDisabled"
              :placeholder="inputDisabled ? '' : '请选择'"
            >
              <el-option
                v-for="item in jclxOption"
                :key="item.dm"
                :label="item.mc"
                :value="item.dm"
              />
            </el-select>
            <el-select
              v-else-if="item.prop === 'ssqyMc'"
              v-model="item.value"
              style="width: 100%"
              :disabled="inputDisabled"
              :placeholder="inputDisabled ? '' : '请选择'"
            >
              <el-option
                v-for="item in qybmOption"
                :key="item.value"
                :label="item.text"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-else-if="item.prop === 'gldwMc'"
              v-model="item.value"
              style="width: 100%"
              :disabled="inputDisabled"
              :placeholder="inputDisabled ? '' : '请选择'"
            >
              <el-option
                v-for="item in gldwOption"
                :key="item.id"
                :label="item.mc"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div v-if="!inputDisabled" class="mt-20px text-right">
      <el-button class="w-80px h-40px" @click="dialogShow = false">取消</el-button>
      <el-button type="primary" class="w-80px h-40px" @click="addData">保存</el-button>
    </div>
  </Dialog>

  <Dialog
    :visible="queryDialogShow"
    title="监测点位详情查看"
    width="1000px"
    @close="queryDialogShow = false"
  >
    <el-form
      v-for="(formItem, formIndex) in queryDialogFormList"
      :key="formIndex"
      :label-width="formItem.formLabelWidth"
    >
      <el-row :gutter="0">
        <el-col v-for="(item, index) in formItem.formList" :key="index" :span="item.span || 12">
          <el-form-item :label="item.label">
            <el-input
              v-if="item.type === 'input'"
              v-model="item.value"
              :type="item.type"
              :disabled="inputDisabled"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </Dialog>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Refresh, Plus, Download } from '@element-plus/icons-vue'
import * as XLSX from 'xlsx'

/** tab start */
const tabActiveIndex = ref(0)
const nylx = ref('2') //能源类型

const topNav = reactive([
  { text: '电力监测点位', dm: '2', xzcs: 'dljc' },
  { text: '蒸汽监测点位', dm: '3', xzcs: 'zqjc' },
  { text: '水务监测点位', dm: '1', xzcs: 'swjc' },
  { text: '燃气监测点位', dm: '4', xzcs: 'rqjc' },
  { text: '用煤监测点位', dm: '5', xzcs: 'ymjc' },
])

//tab切换
const tabClick = (item: any, index: any) => {
  nylx.value = item.dm
  tabActiveIndex.value = index

  resetSearch()
}
/** tab end */

//字典查询
const jclxOption: any = ref([]) //监测类型
const qybmOption: any = ref([]) //所属企业部门
const gldwOption: any = ref([]) //管理单位
function getDictionary() {
  queryZdInfo({ zdxdm: 'jclx' }).then((res: any) => {
    jclxOption.value = res
  })
  queryQymcInfoList().then((res: any) => {
    qybmOption.value = res
  })
  queryGldwInfoList().then((res: any) => {
    gldwOption.value = res
  })
}
getDictionary()

//搜索参数
const pageNo = ref(1)
const pageSize = ref(10)
const tableTotal = ref(0)
const jcdwMc = ref('') //监测点位名称
const jcdwBh = ref('') //监测点位编号
const ssqyMc = ref('') //所属企业部门
const gldwMc = ref('') //管理单位

const resetSearch = () => {
  jcdwMc.value = ''
  jcdwBh.value = ''
  ssqyMc.value = ''
  gldwMc.value = ''

  loadTableData()
}

// 定义列配置
const tableColumns = [
  {
    type: 'index',
    label: '序号',
    width: '80',
  },
  {
    prop: 'dwmc',
    label: '监测点位名称',
  },
  {
    prop: 'dwbh',
    label: '监测点位编号',
  },
  {
    prop: 'ssqyMc',
    label: '所属企业部门',
    width: 200,
  },
  {
    prop: 'ssqyQydz',
    label: '所在地址',
  },
  {
    slotName: 'jwdColumn',
    type: 'slot',
    label: '经纬度',
  },
  {
    prop: 'gldwMc',
    label: '管理单位',
  },
  {
    prop: 'gldwLxrxm',
    label: '联系人',
  },
  {
    prop: 'gldwLxrdh',
    label: '联系电话',
  },
  {
    slotName: 'jclxColumn',
    type: 'slot',
    label: '监测类型',
  },
  {
    label: '操作',
    width: 140,
    slotName: 'actionColumn',
    type: 'slot',
    align: 'center',
  },
]
const tableData = ref([])

/** ----- 加载table数据 ----- */

//处理经纬度
const formatJwd = computed(() => {
  return (jd: any, wd: any) => {
    if (jd && wd) {
      return jd + ', ' + wd
    }
    return ''
  }
})
//处理监测类型
const formatJclx = computed(() => {
  return (val: any) => {
    if (val) {
      let result = ''
      jclxOption.value.forEach((item: any) => {
        if (item.dm == val) {
          result = item.mc
        }
      })
      return result
    }
    return ''
  }
})

function loadTableData() {
  const params = {
    nylx: nylx.value,
    jcdwMc: jcdwMc.value,
    jcdwBh: jcdwBh.value,
    ssqyMc: ssqyMc.value,
    gldwMc: gldwMc.value,
    pageNo: pageNo.value,
    pageSize: pageSize.value,
  }

  queryJcdwManager(params).then((res: any) => {
    tableData.value = res.records

    pageNo.value = res.current
    pageSize.value = res.size
    tableTotal.value = res.total
  })
}
loadTableData()

//分页查询
const handleSizeChange = (val: number) => {
  pageSize.value = val
  loadTableData()
}
const handleCurrentChange = (val: number) => {
  pageNo.value = val
  loadTableData()
}

//导出
const exportExcel = async () => {
  let fdArrayList: any = []
  const data = {
    nylx: nylx.value,
    jcdwMc: jcdwMc.value,
    jcdwBh: jcdwBh.value,
    ssqyMc: ssqyMc.value,
    gldwMc: gldwMc.value,
    pageNo: 1,
    pageSize: 5000,
  }
  await queryJcdwManager(data).then((res: any) => {
    fdArrayList = res.records
  })
  const fdArray: any = []
  fdArrayList.forEach(function (data: any, index: any) {
    const obj = {
      序号: index + 1,
      监测点位名称: data.dwmc,
      所属企业部门: data.ssqyMc,
      所在地址: data.ssqyQydz,
      经纬度: data.ssqyJd + ',' + data.ssqyWd,
      管理单位: data.gldwMc,
      联系人: data.gldwLxrxm,
      联系电话: data.gldwLxrdh,
      监测类型: data.jclx,
    }
    fdArray.push(obj)
  })
  // 新建一个excel.xlsx
  const wb = XLSX.utils.book_new()
  // //封装JSON 数据
  const fdXslxws = XLSX.utils.json_to_sheet(fdArray)
  XLSX.utils.book_append_sheet(wb, fdXslxws, 'sheet')
  XLSX.writeFile(wb, '监测点位管理' + '.xlsx')
  ElMessage({ message: '导出成功！', type: 'success' })
}

//弹窗信息
const dialogShow = ref(false)
const queryDialogShow = ref(false)
const inputDisabled = ref(true)
const dialogFormList = reactive([
  {
    formLabelText: '',
    formLabelWidth: '160px',
    formList: [
      {
        prop: 'dwmc',
        label: '监测点位名称',
        type: 'input',
        value: '',
      },
      {
        prop: 'dwbh',
        label: '监测点位编号',
        type: 'input',
        value: '',
      },
      {
        prop: 'ssqyMc',
        label: '所属企业部门',
        type: 'select',
        value: '',
      },
      // {
      //   prop: 'ssqyQydz',
      //   label: '所在地址',
      //   type: 'input',
      //   value: '',
      // },
      // {
      //   prop: 'ssqyJd',
      //   label: '经度',
      //   type: 'input',
      //   value: '',
      // },
      // {
      //   prop: 'ssqyWd',
      //   label: '纬度',
      //   type: 'input',
      //   value: '',
      // },
      {
        prop: 'gldwMc',
        label: '管理单位',
        type: 'select',
        value: '',
      },
      // {
      //   prop: 'gldwLxrxm',
      //   label: '联系人',
      //   type: 'input',
      //   value: '',
      // },
      // {
      //   prop: 'gldwLxrdh',
      //   label: '联系电话',
      //   type: 'input',
      //   value: '',
      // },
      // {
      //   prop: 'jclx',
      //   label: '监测类型',
      //   type: 'select',
      //   value: '',
      // },
    ],
  },
])

const queryDialogFormList = [
  {
    formLabelText: '',
    formLabelWidth: '160px',
    formList: [
      {
        prop: 'dwmc',
        label: '监测点位名称',
        type: 'input',
        value: '',
      },
      {
        prop: 'dwbh',
        label: '监测点位编号',
        type: 'input',
        value: '',
      },
      {
        prop: 'ssqyMc',
        label: '所属企业部门',
        type: 'input',
        value: '',
      },
      {
        prop: 'ssqyQydz',
        label: '所在地址',
        type: 'input',
        value: '',
      },
      {
        prop: 'ssqyJd',
        label: '经度',
        type: 'input',
        value: '',
      },
      {
        prop: 'ssqyWd',
        label: '纬度',
        type: 'input',
        value: '',
      },
      {
        prop: 'gldwMc',
        label: '管理单位',
        type: 'input',
        value: '',
      },
      {
        prop: 'gldwLxrxm',
        label: '联系人',
        type: 'input',
        value: '',
      },
      {
        prop: 'gldwLxrdh',
        label: '联系电话',
        type: 'input',
        value: '',
      },
      {
        prop: 'jclx',
        label: '监测类型',
        type: 'input',
        value: '',
      },
    ],
  },
]

//新增打开弹窗
const openDialog = () => {
  dialogFormList[0].formList.forEach((item: any) => {
    item.value = ''
  })
  inputDisabled.value = false
  dialogShow.value = true
}

//新增数据
const addData = () => {
  let data: any = dialogFormList[0].formList.map((item: any) => {
    return { [item.prop]: item.value }
  })
  data = data.reduce((acc: any, cur: any) => {
    const key = Object.keys(cur)[0] // 获取对象的键名
    const value = cur[key] // 获取对象的键值
    acc[key] = value // 将键和对应的值添加到累加器对象中
    return acc // 返回累加器对象
  }, {})
  data.nylx = nylx.value

  jcdwInsertOrUpdate(data)
    .then((res) => {
      dialogShow.value = false
      ElMessage.success('新增成功')
      resetSearch()
    })
    .catch((err) => {
      dialogShow.value = false
      ElMessage.error('新增失败')
    })
}

//查询弹窗信息
const queryDialog = (row: any) => {
  queryJcdwInfo({ jcdwId: row.id }).then((res: any) => {
    for (const key in res) {
      queryDialogFormList[0].formList.forEach((item: any) => {
        if (key === item.prop) {
          item.value = res[key]

          if (key === 'jclx') {
            jclxOption.value.forEach((jclx: any) => {
              if (jclx.dm == item.value) {
                item.value = jclx.mc
              }
            })
          }
        }
      })
    }
    inputDisabled.value = true
    queryDialogShow.value = true
  })
}

const deleteData = () => {
  ElMessageBox.confirm('暂无权限操作!', '提示', {
    confirmButtonText: '确认',
    type: 'warning',
    showCancelButton: false,
  }).then(() => {})
}
</script>

<style scoped>
.tab-active {
  font-size: 16px;
  font-weight: 700;
  color: #fff !important;
  background-color: #1990ff !important;
}
</style>
